<template>
	<div class="bussinessScopeBox">
		<Select v-model.trim="settleForm.category" placeholder="请选择业务类别" clearable class="businessScopeSelect" @on-change="categoryChange">
	        <Option v-for="item in categoryJson" :value="item.c" :key="item.c">{{ item.n }}</Option>
	    </Select>
	    <Select v-show="isShowSelect" v-model.trim="settleForm.businessDetailType" placeholder="请选择详细经营范围" multiple class="businessScopeSelect" @on-change="bussinessScopeChange">
	        <Option v-for="item in businessScope" :value="item.c" :key="item.c">{{ item.n }}</Option>
	    </Select>
        <Input v-show="isShowInput" v-model.trim="otherBussinessScope" placeholder="请输入其他选项"></Input>
	</div>
</template>

<script type="text/javascript">
	import { categoryJson, businessScopeJson } from 'commons/json/bussinessScope';
	export default {
		props: {
			settleForm: {
				type: Object
			}
		},
		data() {
			return {
				i: 0,  //防止修改操作执行不必要的清空操作
				isShowInput: false,  //是否显示输入框
				isShowSelect: true, //是否显示下拉框
				categoryJson: categoryJson,
				businessScope: [],   //根据类别显示对应的子类
				otherBussinessScope: '',  //其他经营范围
				idUpdate: false
			}
		},
		methods: {
			getBussinessScope(category, bussinessScope) {  //修改信息时获取经营范围
				this.idUpdate = true;
				if( bussinessScope.includes('99') || category == '4' || category == '99' ){
					let len = bussinessScope.length;
					console.log(len)
					console.log(bussinessScope[len-1])
					this.otherBussinessScope = bussinessScope[len-1];  //一般情况下，最后一个皆为其他输入框的值
					console.log(this.otherBussinessScope)
				}
			},
			categoryChange(val) {
				this.i++;
				this.settleForm.category = val;
				if(this.i !== 1) {  //修改时获取值取消清空操作执行
					this.otherBussinessScope = '';
					this.settleForm.businessDetailType = [];
				}
				if(val == '4' || val == '99'){
					this.isShowInput = true;
					this.isShowSelect = false;
				}else {
					this.isShowInput = false;
					this.isShowSelect = true;
					this.businessScope = businessScopeJson[val-1];
				}
			},
			bussinessScopeChange(val) {
				this.i++;
				if(val.includes('99')) {  //选择了其他

					this.isShowInput = true

				}else{
					
					if(this.settleForm.category == '4' || this.settleForm.category == '99'){  //解决点击下一步时，进行判断不让输入框隐藏

						console.log(this.settleForm.category)
						this.isShowInput = true

					}else{
						if(this.i != 2){  //同理
							this.otherBussinessScope = ''; //不存在其他选项，则清空输入框
						}

						this.isShowInput = false
					}
				}
			},
			otherScopeFun() {  //点击下一步再进行合并
				if(this.otherBussinessScope) {

					if(this.settleForm.category == '4' || this.settleForm.category == '99'){ 

						//选择其他类别时，先清掉值再进行增加，以防出现多个
						this.settleForm.businessDetailType = [];
					}

					if(!this.settleForm.businessDetailType.includes(this.otherBussinessScope)) {

						//针对出现非空判断的提示，再次点击下一步，重复增加的现象
						this.settleForm.businessDetailType.push(this.otherBussinessScope);
					}
					this.isShowInput = true;
				} 
				console.log(this.settleForm.businessDetailType)
			}
		}
	}
</script>
<style lang="less" rel="stylesheet/less">
	@border-color: #D7DDE4;
	@height: 38px;
	.bussinessScopeBox {
		.businessScopeSelect {
			width: 165px;
			margin-right: 2px;
			vertical-align: top;
			.ivu-select-selection {
				height: auto;
				min-height: 40px;
				border: 1px solid @border-color;
				border-radius: 2px;
				.ivu-select-placeholder {
					height: @height;
					line-height: @height;
				}
			}
		}
		.ivu-input,
		.ivu-input-wrapper {
			width: 165px !important; 
			height: 42px;
			line-height: 42px;
		}
	}
</style>


